<template>
    <div>
        <div id="navbar">
            <van-nav-bar
            title="订单列表"
            left-arrow
             @click-left="onClickLeft"
            />
        </div>
        <van-tabs v-model="active">
            <van-tab title="全部订单" name="a">
              <div v-for="(item,index) in order" :key="index" class="order" >
              <van-cell >
                <span >{{item.m_title}}</span>
                    <van-icon name="arrow" />
                    <span>{{item.status ? '已完成':'已接单'}}</span>
                <span class="time">{{item.c_time}}</span><br>
                  <span class="o_id">订单号: {{item.o_id}}</span>
                  <hr>
                <div class="content"> 
                  <span>{{item.o_mish}}</span>
                  <span class="sum">￥{{item.sum}}</span>
                </div>
                  <div class="footer">
                   <van-button  size="mini"  @click="goPjia(item.m_title,item.o_id)">{{item.p_status ? '已评价':'未评价' }}</van-button>
                    <van-button  size="mini" @click="gotoshop(item.m_title)">再来一单</van-button>
                   </div>
              </van-cell>
              </div>
            </van-tab>

            <van-tab title="待评价" name="b">
              <div v-for="(item,index) in pingjia" :key="index" class="order">
              <van-cell >
                <span >{{item.m_title}}</span>
                    <van-icon name="arrow" />
                <span class="time">{{item.c_time}}</span>
                <span class="o_id">订单号: {{item.o_id}}</span>
                  <hr>
                <div class="content"> 
                  <span>{{item.o_mish}}</span>
                  <span class="sum">￥{{item.sum}}</span>
                </div>
                  <div class="footer">
                   <van-button  size="mini" @click="goPjia(item.m_title,item.o_id)" >去评价</van-button>
                    <van-button  size="mini" @click="gotoshop(item.m_title)">再来一单</van-button>
                   </div>
              </van-cell>
              </div>
            </van-tab>
            <van-tab title="退款" name="c">退款详情请咨询商家</van-tab>
            <!-- <van-tab title="标签 4">内容 4</van-tab> -->
            </van-tabs>
     <bar></bar>
    </div>
</template>
<script>
import bar from './Footer'
import {Toast} from 'vant'
import { Button } from 'vant';
export default {
    data() {
    return {
      active:0,
      activeName: 'a',
      activeIds: [1, 2],
      activeIndex: '0',
      order:[],
      pingjia:[],
      i:0,
    };
  },
    components:{
        bar
        },
    mounted() {
       let username= sessionStorage.getItem('username');
            if(!username){
              var that=this;
                Toast({
                message:'请先登录',
                duration:1000,
                onClose:function(){
                    that.$router.push('/login');
                }
                });
            }
        this.axios.get('http://www.shop.com:8080/api.php/common/getOrdersList?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name='+username)
        .then(res=>{
            this.order=res.data.data;
            var j=0;
            for(var i=0;i<this.order.length;i++){
              if(this.order[i].p_status==0){
                this.pingjia[j]=this.order[i];
                j++;
              }
            }
        });
    },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    goPjia(m_title,o_id){
      this.$router.push({path:'/Pjia',query:{m_title:m_title,o_id:o_id}});
    },
     gotoshop(m_title){
       this.axios.get('http://www.shop.com:8080/api.php/common/getMerchantsList?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6')
       .then(res=>{
         this.$router.push({path:'/ShopDetail',query:{m_title:m_title,describe:this.describe,img_id:this.img_id}});
       })
  },
}
}
</script>
<style scoped>
.order{
  height:150px;
   border-top: 1px solid grey;
}
.time {
  float: right;
}
.content{
  height: 30px;
  border-bottom: 1px solid grey;
}
.sum{
  float: right ;
  margin-top: 1px
}
.footer{
  float: right;
  margin-top: 5px;
   
}
.orders{
  float: left;
  margin-top: 10px
}
</style>